<template>
  <div>
    <modal
      name="notice-modal"
      class="my-notice-modal-class"
      @hidden="closeNotice"
    >
      <div class="modal-container">
        <div class="modal-content">
          <div class="modal-title">
            <svg-icon icon-class="rocket" style="margin-right: 5px; width: 50px; height: 50px" />
            <b style="color: #20a0ff">新版发布</b>
            <el-button
              type="text"
              @click.native="jump('/dashboard')"
            >
              <p>{{ version }}</p>
            </el-button>
          </div>
          <div class="modal-info">
            <p v-for="(item, index) in noticeContent" :key="index">
              <el-badge v-if="item.isNew === 1" value="new" class="modal-badge">
                {{ item.title }}
              </el-badge>
              <span v-else> {{ item.title }} </span>
              <el-button
                v-show="item.url !== ''"
                type="text"
                style="font-size: 14px; color: #45abfa; margin-left: 10px"
                @click.native="jump(item.url)"
              >
                [立即体验]
                <!--                <svg-icon icon-class="link" style="width: 12px; height: 12px" />-->
              </el-button>
            </p>
          </div>
          <div class="modal-tail">
            <el-checkbox v-model="checked" class="modal-checkbox">不再提示</el-checkbox>
            <el-button
              ref="hiddenButton"
              type="primary"
              size="mini"
              class="modal-button"
              @click="closeNotice"
            >知道了</el-button>
          </div>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>
import userAdminApi from '@/api/userAdmin/userAdmin'
import { setUserInfo } from '@/utils/localStorage'

export default {
  name: 'NoticeModal',
  data() {
    return {
      noticeContent: [],
      user: {},
      checked: false,
      version: 'v4.0.2'
    }
  },

  mounted() {
    fetch('/noticeContent.json')
      .then(response => response.json())
      .then(data => {
        this.noticeContent = data.list
      })
    setTimeout(() => {
      const userInfo = localStorage.getItem('userInfo')
      if (userInfo) {
        this.user = JSON.parse(decodeURIComponent(escape(atob(userInfo)))) // 从localStorage获取用户信息
        this.showModal() // 判断展示弹窗
      } else {
        this.showModal()
      }
    }, 500) // 延迟执行，以保证能获取到最新的用户信息
  },

  methods: {
    showModal() {
      if (!this.user) { // 如果不存在，则展示弹窗
        this.$modal.show('notice-modal')
      } else if (this.user.noticeStatus === 0) { // 如果不为1，则展示弹窗
        this.$modal.show('notice-modal')
      }
    },

    closeNotice() {
      this.$modal.hide('notice-modal')
      if (this.checked) { // 如果勾选了不在提示
        this.user = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem('userInfo')))))
        userAdminApi.setNoticeStatus(this.user.id)

        this.user.noticeStatus = 1
        setUserInfo(btoa(unescape(encodeURIComponent(JSON.stringify(this.user))))) // 更新localStorage的状态
      }
    },

    async jump(url) {
      this.checked = false
      this.closeNotice()
      await setTimeout(() => {
        this.$router.push({ path: url })
      }, 30) // 页面跳转做延迟，避免发生css错位
    }
  }
}
</script>

<style>
  .my-notice-modal-class .vm--overlay {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    /* z-index: 999; */
    opacity: 1;
  }

  .my-notice-modal-class .vm--modal {
    position: absolute !important;
    top: 87px !important;
    left: 660px !important;
    width: 600px !important;
    height: 300px !important;
    border-radius: 15px !important;
  }

  .my-notice-modal-class .modal-container {
    display: flex;
  }

  .my-notice-modal-class .modal-content {
    /*background-color: #a8a8a8;*/
    width: 600px;
    height: 300px;
    margin: auto;
  }

  .my-notice-modal-class .modal-content .modal-tail {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 15px;
    right: 20px;
  }

  .my-notice-modal-class .modal-content .modal-tail .modal-checkbox {
    font-size: 13px;
    margin-right: 10px;
  }

  .my-notice-modal-class .modal-content .modal-tail .modal-button {
    background-color: #20a0ff;
  }

  .my-notice-modal-class .modal-title {
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 18px;
    text-align: left;
    align-items: center;
    padding: 30px 20px 0px 20px;
  }

  .my-notice-modal-class .modal-title p {
    position: relative;
    font-size: 10px;
    display: inline-block;
    margin-left: 5px;
    vertical-align: bottom;
    bottom: -0.4em;
    color: #636262
  }

  .my-notice-modal-class .modal-info {
    font-family: Arial, sans-serif;
    font-size: 15px;
    text-align: left;
    margin-top: 10px;
    margin-left: 20px;
  }

  .my-notice-modal-class .modal-info p {
    display: flex;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    height: 35px;
    color: #4b4b4b
  }

  .my-notice-modal-class .modal-badge .el-badge__content.is-fixed {
    right: 0px;
  }
</style>
